<template>
    <el-card class="zone">
            <el-row class="category" v-for="(row,idx) in zoneInfo"  :row="row" :index="idx">
                <el-col  v-if="flag==true||idx<2" class="title" :span="2">
                    <div>{{row.label}}</div>
                </el-col>
                <el-col v-if="flag==true||idx<2" class="context" :span="row.name=='startClassDate'?9:22" >
                    <el-date-picker
                        v-model="dateTime"
                        type="daterange"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        v-if="row.name=='startClassDate'"
                        @change="dateChange(row)"
                    />
                    <div class="selected" v-else :class="item.flag?'active':''" v-for="(item,num) in row.choises" :key="item.id" @click="params({item,row,index:num,idx})">{{item.name}}</div>


                </el-col>
            </el-row>
        <div class="footer">
            <p @click="leng" v-if="!flag">展开全部</p>
            <p @click="leng" v-if="flag">收起</p>
        </div>
    </el-card>
</template>

<script setup lang="ts">
    import {defineProps,ref,defineEmits} from 'vue'
    import type {zoneList,choise} from "@/api/course/course";
    import lodash from 'lodash'
    import moment from 'moment'
    import {ElMessage} from "element-plus";
    const emits=defineEmits<{
        (e:'pageInit',data:any):void
    }>()
    const props=defineProps<{
        zoneInfo:zoneList[]
    }>()
    const flag=ref(false)
    const leng=()=>{
        flag.value=!flag.value
        emits('pageInit',flag)
    }

    const initForm=()=>{
        return {
            filterInfo:[]
        }
    }
    const initZone=()=>{
        return {
                filterCode: '',
                filterValue: []
        }
    }
    const zonelis=ref()
    const zoneForm=ref(initForm())
    const params=({item, row, index, idx}:any)=>{
        // @ts-ignore
        let codeList=zoneForm.value?.filterInfo?.find(item=>row.name==item?.filterCode)
        if(codeList&&item.length!=2){
            // @ts-ignore
            let value=codeList.filterValue.findIndex(lis=>lis==item.id)
            if(value>-1){
                // @ts-ignore
                codeList.filterValue.splice(value,1)
                // @ts-ignore
                let val=zoneForm.value.filterInfo.findIndex(info=>info.filterValue.length==0)
                if(val){
                    zoneForm.value.filterInfo.splice(val,1)
                }
            }

            if(value<0){
                // @ts-ignore
                if(codeList.filterValue.length>2) {
                    ElMessage.warning('不能大于3个')
                    return
                }
                // @ts-ignore
                codeList.filterValue.push(item.id)
            }

        }else{
            zonelis.value=initZone()
            if(item.length==2){
                zonelis.value.filterCode=row.name
                zonelis.value.filterValue=item
                zoneForm.value.filterInfo.splice(0,1,zonelis.value as never)
            }else{
                zonelis.value.filterCode=row.name
                zonelis.value.filterValue.push(item.id)
                zoneForm.value.filterInfo.push(lodash.cloneDeep(zonelis.value) as never)
            }
        }
        emits('pageInit', {data:zoneForm.value})
        if(!(item.length==2)) {
            item.flag = !item.flag
        }

    }
    const dateTime = ref([])
    const defaultTime = ref<[Date, Date]>([
        new Date(2000, 1, 1, 0, 0, 0),
        new Date(2000, 2, 1, 23, 59, 59),
    ])
    const dateChange=(row:any)=>{
        let time=dateTime.value.map((item:string)=>{
            return moment(item).format('x')
        })
        params({item:time,row})

    }
</script>
<!--时间选择器样式-->
<style lang="less" scoped>
.demo-date-picker {
    display: flex;
    width: 100%;
    padding: 0;
    flex-wrap: wrap;
}
.demo-date-picker .block {
    text-align: center;
    border-right: solid 1px var(--el-border-color);
    flex: 1;
}
.demo-date-picker .block:last-child {
    border-right: none;
}
</style>
<style lang="less" scoped>
.zone{
    width: 1200px;
    padding: 20px 0;
    margin-top: 10px;
    .category{
        width: 100%;
        margin-left: 15px;
        display: flex;
        align-items: center;
        .context{
            width: 1045px;
            display: flex;
            padding: 7px 13px;
            align-items: center;
            flex-wrap: wrap;
        }
        .selected{
            text-align: center;
            margin-top: 10px;
            margin-right: 10px;
            width: 80px;
            border-radius: 5px;
        }
        .active{
            background-color: #fa5e9d;
            color: white;
        }
    }
    .footer{
        width: 100%;
        display: flex;
        justify-content: center;
        color: #fa5e9d;
    }
}

</style>
